<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模板语法之插值语法</title>
    <!-- 安装 Vue -->
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 
        主要：研究{{这里可以写什么}}
        1. 在 data中声明的变量，函数等都可以
        2. 常量都可以
        3.只要是合法的Javascript表达式，都i可以
        4.模板表达式都放在沙盒中，只能访问全局变量的一个白名单，如：Math 和 Data 等。
     -->

     <div id="app">
        <!-- 这里就可以看做在使用msg变量 -->
        <h1>{{msg}}</h1>
        <h1>{{sayHello()}}</h1>
        <!-- <h1>{{i}}</h1> -->
        <!-- <h1>{{sum()}}</h1> -->

        <!-- 常量 -->
        <h1>{{100}}</h1>
        <h1>{{'hello vue'}}</h1>
        <h1>{{3.14}}</h1>


        <!-- JavaScript 表达式 -->
        <h1>{{1  + 1}}</h1>
        <h1>{{'hello' + 'vue'}}</h1>
        <h1>{{msg + 1}}</h1>
        <h1>{{'msg' + 1}}</h1>
        <h1>{{gender ? '男' : '女'}}</h1>
        <h1>{{number + 1}}</h1>
        <h1>{{'number' + 1}}</h1>
        <h1>{{msg.split('').reverse().join('')}}</h1>

        <!-- 错误的：不是表达式，而是语句 -->
        <!-- <h1>{{var i = 100}}</h1> -->

        <!-- 在白名单里面的 -->
        <h1>{{Date}}</h1>
        <h1>{{Date.now()}}</h1>
        <h1>{{Math}}</h1>
        <h1>{{Math.ceil(3.14)}}</h1>
     </div>

     <!-- Vue 程序 -->
     <script>

        // 用户自定义的一个全局变量
        var i = 100
        // 用户自定义的一个全局函数
        function sum() {
            console.log('sum...');
        }

        new Vue({
            el : '#app',
            data : {
                gender : true,
                msg : 'adcdef',// 为了方便沟通，以后我们把 msg 叫做变量。(这行代码就可以看做是变量的声明)
                sayHello : function() {
                    // console.log('hello');
                }

            }
        })
     </script>

    
    
</body>
</html>